<template>
	<view>
		<view class="background" :style="'height:'+height+'px'"></view>

		<view class="header">
			<image src="../../static/upload/page.svg" style="position: absolute;left:70rpx;top:30rpx;width: 50rpx;height: 50rpx;"></image>
			上传
		</view>
		<view class="image_vs" :style="'transform: rotateY('+aaahearRotateY+'deg);'">

			<aaahear-image @click="chooseVideo(1)" class="aaahearImage" title="添加视频" src="../../static/upload/upload.svg"
			 :shadowBool="shadowBool" />
			<view style="height: 120rpx;"></view>
			<aaahear-image @click="chooseVideo(1)" class="aaahearImage" title="添加视频" src="../../static/upload/upload.svg"
			 :shadowBool="shadowBool" />
			<view style="height: 120rpx;"></view>
			<aaahear-image title="添加视频" class="aaahearImage" src="../../static/upload/upload.svg" :shadowBool="shadowBool" />
			<view style="height: 120rpx;"></view>
			<aaahear-image title="添加视频" class="aaahearImage" src="../../static/upload/upload.svg" :shadowBool="shadowBool" />
			<view style="height: 70rpx;"></view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: wx.getSystemInfoSync().windowHeight || window.innerHeight,
				width: wx.getSystemInfoSync().windowWidth || window.innerHeight
			}
		},
		mounted() {},
		methods: {
			//点击上传图片或视频 	
			chooseVideoImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					},
				});
			},
			//上传图片 
			chooseImages() {
				uni.chooseImage({
					count: 4,
					//默认是9张 
					sizeType: ['original', 'compressed'],
					//可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					//从相册选择
					success: res => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)
						if (this.imageList.length == 4) {
							this.VideoOfImagesShow = false;
							//图片上传数量和count一样时，让点击拍照按钮消失 
						}
					},
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 10,
					//拍摄视频最长拍摄时间，单位秒。最长支持 60 秒 
					count: 4,
					camera: this.cameraList[this.cameraIndex].value,
					//'front'、'back'，默认'back' 
					sourceType: sourceType[this.sourceTypeIndex],
					success: res => {
						this.srcVideo = this.srcVideo.concat(res.tempFilePath);
						if (this.srcVideo.length == 4) {
							this.VideoOfImagesShow = false;
						}
						console.log(this.srcVideo);
					},
				})
			}, //预览图片
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				});
			},
			// 删除图片 
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}
						if (this.imageList.length == 4) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
			// 删除视频
			delectVideo(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
						if (res.confirm) {
							this.srcVideo.splice(index, 1);
						}
						if (this.srcVideo.length == 4) {
							this.VideoOfImagesShow = false;
						} else {
							this.VideoOfImagesShow = true;
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		background: #00aaff;
	}

	.background {
		position: fixed;
		z-index: -1;
		width: 100%;
		top: 0;
		background: #00aaff;
	}

	.header {
		position: fixed;
		top: 0;
		width: 500rpx;
		margin-left: 125rpx;
		font-size: 50rpx;
		color: #FEF0F0;
		font-weight: bold;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-radius: 0 0 100rpx 100rpx;
		margin-bottom: 100rpx;
		background: linear-gradient(145deg, #4da7db, #5bc6ff);
		box-shadow: 20px 20px 60px #489dcf,
			-20px -20px 60px #62d5ff;
		z-index: 99;
	}

	.image_vs {
		margin-top: 170rpx;
		margin-left: 145rpx;
		width: 300rpx;
		bottom: 200rpx;
	}

	.aaahearImage:active {
		opacity: .4;
	}
</style>
